<script setup>

import { ref } from 'vue'

const rememberAccount = ref(false);

const username = ref("");
const password = ref("");

const emits = defineEmits(["login"])


function clickFn(){
    emits("login", username.value, password.value)
}


// function forgetPassword(){
    
// }

</script>

<template>
    <div class="loginPage">
        <div class="loginContent">
            <h2>飞翔教育办公OA系统</h2>
            <div class="inputBox">
                <p>用户名：</p><el-input v-model="username" class="input" placeholder="请输入用户名" clearable />
            </div>
            <div class="inputBox">
                <p>密码：</p><el-input v-model="password" class="input" type="password" placeholder="请输入密码" show-password /><br>
            </div>

            <!-- <el-checkbox v-model="rememberAccount" label="记住账号" size="small" class="rememberAcc" /> -->
            <!-- <el-button text @click="forgetPassword" class="forgetpw">忘记密码</el-button> -->

            <el-button class="login" type="primary" @click="clickFn">登录</el-button>
            <p class="loginTip">公司内部系统，如需使用请联系管理员获取账号</p>
        </div>
    </div>

</template>

<style>

.loginPage{
    background:#efefef;
    position:fixed;
    left:0;top:0;right:0;bottom:0;
    background: url("@/assets/images/login_logo.jpg") no-repeat;
    background-size: 100% 100%;
}
.loginContent{
    width:310px;
    padding:20px;
    border-radius:10px;
    position:fixed;
    height:300px;
    left:0;top:0;right:0;bottom:0;
    margin:auto;
    background:#fff;
}

.loginContent h2{
    text-align:center;
    margin-bottom:30px;
    font-size: 28px;
    color: var(--color-bg-text);
}

.loginContent .inputBox{
    display: flex;
    justify-content: space-around;
    margin: 20px 0;
}
.inputBox p{
    width: 24%;
    height: 30px;
    line-height: 30px;
    color: var(--color-bg-text);
}
.inputBox .input{
    width: 76%;
    height: 30px;
}
.loginContent .rememberAcc{
    margin-left: 24%;
}
.loginContent .forgetpw{
    position: relative;
    left: 50px;
    top: -2px;
}
.loginContent .login{
    width:90%;
    /* margin: 0 auto; */
    margin-left: 20px;
    margin-top: 10px;
}

.loginContent .loginTip{
    font-size:12px;
    color:#aaa;
    margin:10px 0;
}

</style>